<template>
    <div class="stp">
        <el-form :model="stp1Form" status-icon :rules="stp1rules" ref="stp1Form" label-width="64px" size="medium">
            <el-form-item label="手机号:" prop="tel">
                <el-input type="tel" v-model="stp1Form.tel" auto-complete="off" placeholder="请输入手机号码"
                          :maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="验证码:" prop="code">
                <el-input v-model="stp1Form.code" auto-complete="off"
                          placeholder="请输入验证码"></el-input>
                <img :src="imgCode" alt="">
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('stp1Form')">下一步</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    const reg = /^0?1[3|4|5|8|7][0-9]\d{8}$/;
    let verifycode = "x6ow";
    export default {
        data() {
            let checkTel = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入电话号码'));
                } else if ((value.length > 0 && value.length !== 11) || !reg.test(value)) {
                    callback(new Error('请输入正确的手机号码'));
                } else if(value.length !== 11 && reg.test(value)){
                    callback();
                    this.$refs.stp1Form.validateField('code',function(valid){
                        if(!valid){
                            alert("submit");
                        }
                    });
                }
            };
            let checkCode = (rule, value, callback) => {
               if (value!=="" && value.toLocaleLowerCase() !== verifycode.toLocaleLowerCase()) {
                    callback(new Error('请输入正确的验证码'));
                } else if(value.toLocaleLowerCase() === verifycode.toLocaleLowerCase()) {
                    callback();
                   location.href = "#/authentication";
                }
            };
            return {
                stp1Form: {
                    tel: '',
                    code: ''
                },
                stp1rules: {
                    tel: [
                        {validator: checkTel, trigger: 'blur'}
                    ],
                    code: [
                        {validator: checkCode, trigger: 'blur'}
                    ]
                }
            };
        },
        created() {
            this.imgCode = require('../../assets/images/imgCode.png')
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validateField("tel");
            }
        }
    }
</script>

<style lang="scss">
    .stp {
        .el-form {
            font-size: 15px;
            color: #000;
            width: 340px;
            margin: 0 auto;
            ::-webkit-input-placeholder {
                color:    #999;
            }
            :-moz-placeholder {
                color:    #999;
                opacity:  1;
            }
            ::-moz-placeholder {
                color:    #999;
                opacity:  1;
            }
            :-ms-input-placeholder {
                color:    #999;
            }
            .el-form-item{
                position: relative;
                margin-bottom: 30px;
                img {
                    position: absolute;
                    margin: auto;
                    top:0;
                    right: 12px;
                    bottom: 0;
                    left: auto;
                    width: 90px;
                    height: 30px;
                    border: 1px solid #dfdfdf;
                    &:hover{
                        cursor: pointer;
                    }
                }
            }
            .el-button{
                height: 40px;
                width: 100%;
            }
            .el-button--primary{
                font-size: 17px;
                background-color: #ff6235;
                border-color: #ff6235;
            }

        }
    }
</style>

<style lang="scss">
    .el-form-item__label {
        padding-right: 18px;

    }
    .el-input--medium {
        .el-input__inner{
            height: 40px;
            line-height: 40px;
        }


    }
    .el-form-item--medium{
        .el-form-item__label{
            line-height: 40px;
            height: 40px;
        }
        .el-form-item__content{
            line-height: 40px;
        }
    }

</style>
